<template>
  <back-dialog-base
    :title="title"
    :visible="visibleAdd"
    width="580px"
    @onCommit="handleSubmit"
    destroy-on-close
    @close="clear"
  >
    <template #content>
      <div class="content-wrap">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="96px"
          class="addForm"
        >
          <el-form-item label="所属管廊：" prop="pipeId">
            <el-select v-model="form.pipeId" placeholder="--请选择--">
              <el-option
                v-for="item in pipeArray"
                :key="item.id"
                :label="item.pipeName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属仓室：" prop="storehouseId">
            <el-select v-model="form.storehouseId" placeholder="--请选择--">
              <el-option
                v-for="item in storehouseArray"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="防火分区：" prop="subregionId">
            <el-select v-model="form.subregionId" placeholder="--请选择--">
              <el-option
                v-for="item in subregionArray"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="计划编号：" prop="number">
            <el-input v-model="form.number"></el-input>
          </el-form-item> -->
          <el-form-item label="计划名称：" prop="planName">
            <el-input
              v-model="form.planName"
              placeholder="--请输入--"
            ></el-input>
          </el-form-item>
          <el-form-item label="系统类型：" prop="systemType">
            <el-input
              v-model="form.systemType"
              placeholder="--请输入--"
            ></el-input>
          </el-form-item>
          <el-form-item label="维护类型：" prop="maintainType">
            <el-select v-model="form.maintainType" placeholder="--请选择--">
              <el-option
                v-for="item in maintainTypeArray"
                :key="item.code"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="维护人员：" prop="maintainPersonnelName">
            <el-select
              v-model="form.maintainPersonnelName"
              placeholder="--请选择--"
              @change="userType"
            >
              <el-option
                v-for="item in PersonnelArray"
                :key="item.id"
                :label="item.name"
                :value="`${item.name}|${item.id}`"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="计划时间：" prop="planStartTime">
            <el-date-picker
              v-model="form.planStartTime"
              type="datetime"
              format="YYYY-MM-DD hh:mm:ss"
              value-format="YYYY-MM-DD hh:mm:ss"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="维保说明：" prop="maintainDescription">
            <el-input
              v-model="form.maintainDescription"
              placeholder="--请输入--"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { pipelist, warehouselist, fireprooflist } from '@/api/back'
import { searchPersonl, repairType, saveplan } from '@/api/maintain'
import { throwStatement } from '@babel/types'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleAdd: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  },
  userInfo: {
    type: Object,
    default: () => {}
  }
})

const form = reactive({
  pipeId: '',
  storehouseId: '',
  subregionId: '',
  planName: '',
  systemType: '',
  maintainType: '',
  maintainPersonnelName: '',
  planStartTime: '',
  maintainDescription: ''
})
const visibleAdd = ref(false)
const pipeArray = ref([])
const storehouseArray = ref([])
const subregionArray = ref([])
const maintainTypeArray = ref([])
const PersonnelArray = ref([])
const getListData = async () => {
  pipeArray.value = await pipelist()
  storehouseArray.value = await warehouselist()
  subregionArray.value = await fireprooflist()
  PersonnelArray.value = await searchPersonl()
  maintainTypeArray.value = await repairType({
    code: '',
    type: 6
  })
}
getListData()
console.log()

const emits = defineEmits(['onReload'])

// 表单校验
const formRef = ref(null)
const rules = ref({
  pipeId: [
    {
      required: true,
      trigger: 'change',
      message: '请选择管廊名称'
    }
  ],
  storehouseId: [
    {
      required: true,
      tirrger: 'blur',
      message: '请选择仓室名称'
    }
  ],
  subregionId: [
    {
      required: true,
      tirrger: 'blur',
      message: '请选择防火分区名称'
    }
  ],
  planName: [
    {
      required: true,
      tirrger: 'blur',
      message: '请输入计划名称'
    }
  ],
  systemType: [
    {
      required: true,
      tirrger: 'blur',
      message: '请输入系统类型'
    }
  ],
  maintainType: [
    {
      required: true,
      tirrger: 'blur',
      message: '请选择维护类型'
    }
  ],
  maintainPersonnelName: [
    {
      required: true,
      tirrger: 'blur',
      message: '请选择维护人员'
    }
  ],
  planStartTime: [
    {
      required: true,
      tirrger: 'blur',
      message: '请选择开始时间'
    }
  ],
  maintainDescription: [
    {
      required: true,
      tirrger: 'blur',
      message: '请输入维护说明'
    }
  ]
})

const userType = (item) => {
  const [name, id] = item.split('|')
  form.maintainPersonnelName = name
  form.maintainPersonnelId = id
}
const handleSubmit = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      save(form)
    } else {
      console.log('error submit!')
      return false
    }
  })
}
//新增
const save = async (data) => {
  const res = await saveplan(data)
  message({ type: 'success', message: '新增成功!' })
  clearForm()
  emits('onReload')
  emits('onCloes')
}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

const clear = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

// const clearForm = () => {
//   if (!formRef.value) return
//   formRef.value.resetFields()
//   form.value = {
//     pipeId: '',
//     storehouseId: '',
//     subregionId: '',
//     planName: '',
//     systemType: '',
//     maintainType: '',
//     maintainPersonnelName: '',
//     planStartTime: '',
//     maintainDescription: ''
//   }
// }
</script>

<style lang="scss" scoped>
.font {
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}
:deep(.el-date-editor.el-input, .el-date-editor.el-input__inner) {
  width: 100%;
}

.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 13px;

  .right-form {
    span {
      width: 26px;
      height: 15px;
    }
  }
}
.el-input {
  width: 400px;
}
.el-select {
  width: 400px;
}
</style>
